
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="div1">
    <!-- 在页面中使用组件 -->
    <inner-Component1></inner-Component1>
    <inner></inner>
    <Hello-World></Hello-World>
  </div>

  <script type="text/javascript">
    /*
      组件注册：
        1. data：是必须的函数
        2. template：模板定义为多行的时候使用  ` `
        3. 如果采用驼峰式的规则命名，在页面使用的时候也得使用 -
        4. 组件可以互相套用：在模板内直接调用其它组件的名称就可以了。
     
      局部组件的用法：直接在vue对象中定义。
      需求：在全局组件中使用局部组件：可以吗？是不可以的。



    */
    Vue.component("HelloWorld",{      //全局注册组件
        template: '<div>HelloWorld<inner-Component1></inner-Component1></div>'
    });               /*定义了 HelloWorld 组件的模板内容   组件将渲染为一个 div 元素  div 元素中包含文本 "HelloWorld"*/

    const innerComponent1 = {     //它定义了一个简单的 Vue 组件，但是还没有注册组件，无法使用
        data: function() {              //data 是一个函数，它返回一个对象  该对象有一个 msg 属性，其值为字符串 "innerComponent1"
            return {
                msg: "innerComponent1"
            }
        },
        template: '<div>{{msg}}</div>'   //template 是一个字符串，它定义了组件的 HTML 结构  使用了 Vue 的插值语法 {{ msg }}，它会被替换为 data 对象中 msg 属性的值
    }

    const vm = new Vue({    //创建Vue的实例对象
      el: '#div1',
      data: {
        
      },
      // 定义的局部
      components: {       //在vue对象中注册组件   在这里注册一个局部组件，因为实在vm这个实例里面写的
        'innerComponent1': innerComponent1,
        'inner': innerComponent1,
        /*
        *   键（'innerComponent1'）：这是组件的名字，它是一个字符串。在 Vue 的模板中，你将使用这个名字（作为自定义标签）来引用这个组件。
        *   注意，组件名在模板中通常使用短横线分隔（kebab-case），例如 <inner-component-1></inner-component-1>。
        *
        *   值（innerComponent1）：这是组件对象本身，它包含了组件的选项，如 data、template、methods 等。
        *   这个组件对象是你之前定义好的，它描述了组件的行为和外观。
        * */

      }
    });
  </script>
</body>
</html>
